<template>
    <div class="swiperWrap">
        <swiper class="swiper" :options="swiperOptions">
            <swiper-slide v-for="(item, index) in dataList" :key="index">
                <template v-if="type == 'oneLine'">
                    <div class="boxItem" style="width: 100%;height: calc(10vh + 6px);display: flex;">
                        <BoxRIght :index="index">
                        </BoxRIght>
                    </div>
                </template>
                <!-- <template v-else-if="type == 'letBox'">
                    123
                </template> -->
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import BoxRIght from './components/BoxRight.vue';
export default {
    name: 'ZSSwiper',
    components: {
        BoxRIght,
    },
    props: {
        dataList: {
            type: [Object, Array],
            default: ()=>[],
        },
        type: {}
    },
    data() {
        return {
        }
    },
    computed: {
        swiperOptions() {
            let options = {
                loop: true,
            };
            if (this.type == 'oneLine') {
                // 
                options = {
                    // 一页显示个数
                    slidesPerView: 5,
                    // 盒子与盒子的距离
                    spaceBetween: 14,
                    // 高度自适应
                    autoHeight: true,
                    // 自动滚动时间
                    autoplay: {
                        delay: 2500, // 每张幻灯片停留的时间
                        disableOnInteraction: false, // 用户操作后是否停止自动滚动
                    },
                    speed: 2000,
                }
            } else {
            }
            return options;
        }
    },
    mounted() {

    }
}
</script>
<style lang="less" scoped>
.swiperWrap {
    height: 100%;
}

.swiper {
    height: 100%;
}

// .swiper-slide {
//     width: 20vw !important;
// }

// .boxItem {
//     width: 20vw !important;
// }</style>